<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>前端开发工程师简历模板 · 计算机科学与技术 · 大三</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header class="header" role="banner">
      <div class="container">
        <h1 class="name" id="name">吴宇晨（计算机科学与技术·大三）</h1>
        <p class="role" aria-describedby="name">求职目标：前端开发工程师（实习/校招）</p>
        <p class="contact">
          <a href="mailto:your.name@example.com" aria-label="邮箱">邮箱:chengcc_0817.qq.com</a>
          <span class="dot">•</span>
          <a href="tel:13800001234" aria-label="电话">电话:15616805361</a>
          <span class="dot">•</span>
          <a href="https://github.com/your-github" target="_blank" rel="noopener">GitHub</a>
          <span class="dot">•</span>
          <a href="https://your-portfolio.example.com" target="_blank" rel="noopener">个人网站/作品集</a>
          <span class="dot">•</span>
          <span>城市：广州 · 可接受远程/混合</span>
          <span>已经通过英语四六级考试</span>
        </p>
      </div>
    </header>

    <main class="container">
      <section class="grid" aria-label="简历主体布局">
        <!-- 左侧列：简介、技能、求职目标 -->
        <aside aria-label="个人信息与技能">
          <article class="card" aria-labelledby="about-title">
            <h2 id="about-title">个人简介</h2>
            <p>
              计算机科学与技术专业大三学生，具备扎实的前端基础与良好的代码习惯，熟悉语义化HTML5、现代CSS与基础JavaScript，能够进行响应式布局与组件化开发。
              对工程化和可访问性有实践经验，注重用户体验与细节。
            </p>
          </article>

          <article class="card" aria-labelledby="objective-title">
            <h2 id="objective-title">求职目标</h2>
            <p>
              前端开发工程师（实习/校招）。希望参与企业级前端项目，提升在组件设计、状态管理、性能优化与交互体验方面的能力。
            </p>
          </article>

          <article class="card" aria-labelledby="skills-title">
            <h2 id="skills-title">技能特长</h2>
            <ul class="tags" role="list">
              <li>HTML5（语义化/可访问性）</li>
              <li>CSS3（Flex/Grid/响应式）</li>
              <li>JavaScript（ES6+基础）</li>
              <li>Git/代码管理</li>
              <li>Webpack/Vite（基础）</li>
              <li>REST/JSON</li>
              <li>前端性能/SEO基础</li>
            </ul>
          </article>

          <article class="card" aria-labelledby="self-title">
            <h2 id="self-title">自我评价</h2>
            <ul class="item-list">
              <li>学习速度快，能迅速掌握新技术与框架。</li>
              <li>注重代码可读性与规范，习惯进行组件化与复用。</li>
              <li>沟通协作顺畅，按时交付，能在压力下有效推进。</li>
              <li>有责任心与细节意识，关注性能与可访问性。</li>
            </ul>
          </article>

          <!-- 荣誉与证书板块移至左侧列最后 -->
          <article class="card" aria-labelledby="awards-title">
            <h2 id="awards-title">荣誉与证书</h2>
            <ul class="item-list">
              <li>Google Professional Web Developer 认证</li>
              <li>阿里云 ACP Web 前端工程师认证</li>
              <li>英语能力：大学英语六级（CET-6）</li>
            </ul>
          </article>
        </aside>

        <!-- 右侧列：项目、实践经历、教育背景 -->
        <section aria-label="项目与经历">
          <article class="card" aria-labelledby="projects-title">
            <h2 id="projects-title">项目经历</h2>

            <div class="item">
              <div class="item-head">
                <strong>响应式个人作品集网站</strong>
                <span class="meta">2024.03 - 2024.05 · 独立开发</span>
              </div>
              <ul class="item-list">
                <li>使用语义化HTML5与现代CSS Grid构建双栏布局，移动端自适应。</li>
                <li>通过懒加载与资源压缩优化首页性能，Lighthouse性能分 95+。</li>
                <li>封装卡片组件与标签样式，提升复用性与维护性。</li>
              </ul>
            </div>

            <div class="item">
              <div class="item-head">
                <strong>校园活动信息页面重构</strong>
                <span class="meta">2023.11 - 2023.12 · 团队2人</span>
              </div>
              <ul class="item-list">
                <li>用原生JS优化交互与可访问性（键盘导航/语义标签），提升用户体验。</li>
                <li>引入CSS变量实现主题定制，压缩CSS体积约30%。</li>
                <li>通过Git分支协作与代码评审，规范提交信息与合并流程。</li>
              </ul>
            </div>
          </article>

          <article class="card" aria-labelledby="experience-title">
            <h2 id="experience-title">实践经历</h2>
            <div class="item">
              <div class="item-head">
                <strong>前端技术学习与社区贡献</strong>
                <span class="meta">2023 - 至今</span>
              </div>
              <ul class="item-list">
                <li>撰写前端学习笔记与小技巧，积累组件化、样式架构与调试经验。</li>
                <li>在GitHub参与开源项目的文档修订与问题反馈，提升协作能力。</li>
              </ul>
            </div>
          </article>

          <article class="card" aria-labelledby="education-title">
            <h2 id="education-title">教育背景</h2>
            <div class="item">
              <div class="item-head">
                <strong>湖南农业大学大学 · 计算机科学与技术（本科）</strong>
                <span class="meta">2022 - 2026（当前：大三）</span>
              </div>
              <ul class="item-list">
                <li>核心课程：数据结构、计算机网络、操作系统、数据库系统、软件工程。</li>
                <li>专业方向：Web前端与用户体验、Web工程化基础。</li>
              </ul>
            </div>
          </article>
        </section>
      </section>
    </main>

    <footer class="container footer">
    </footer>
  </body>
</html>